import { useMaterialDrop } from "../../hooks/useMaterialDrop";
import { CommonComponenetProps } from "../../interface";

const Page = ( {id, name, children, styles }: CommonComponenetProps ) => {

    // 容器类的组件才接受 Drop
    // components 初始有一个 Page 组件，后续插入的子组件的 parentId 就是这个 id
    const {canDrop, drop } = useMaterialDrop(["Button", "Container", "Modal", "Table", "Form"], id);

    return (
        <div 
            data-component-id={id}
            ref={ drop } 
            className="page p-[20px] h-[100%] box-border"
            style={{ border: canDrop ? "2px dashed blue" : "none", ...styles}}
        >
            {/* 子组件会插到这个位置， children 相当于插槽 */}
            { children } 
        </div>
    )
}

export default Page;